<template>
	
    <view class="father">
		
		<view>
			<uni-notice-bar show-icon scrollable
			text="完成认证解锁所有功能,请先完成认证商户相关信息">
			</uni-notice-bar>
			
		</view>
		
        <view style="width: 100%;" class="sou">
			
			
			
			
			
            <view class="search-container">
                <!-- 使用 uni-search-bar 组件进行搜索，v-model 绑定 searchQuery -->
                <uni-search-bar
                    v-model="searchQuery"
                    radius="100"
                    placeholder="搜索商品"
                    clearButton="auto"
                    cancelButton="none"
                    bgColor="white"
                    @confirm="handleSearch"  <!-- 点击搜索按钮时触发 handleSearch 方法 -->
                />
				</uni-search-bar>
            </view>
        </view>

        <view class="list">
            <!-- 左侧分类列表 -->
            <scroll-view scroll-y="true" class="left">
                <view v-for="i in haha" :key="i.id" class="left1" @click="tolift(i, i.id)">
                    <view class="left2" :class="{'left-name': activeIndex === i.id}">
                        {{ i.tname }} <!-- 显示分类名称 -->
                    </view>
                </view>
            </scroll-view>
            <!-- 右侧商品列表 -->
            <view class="you"> 
                <scroll-view scroll-y="true" class="right">
                    <view class="right-1">
                        <view class="right-xun" >
                            <view class="right-item" v-for="zx in shang" :key="zx.goodsName" @click="tiao(zx.goodsName)">
                                <image class="img" :src="zx.goodsPics" style="width: 200rpx; height: 200rpx;"></image>
                                <text class="right-name">{{ zx.goodsName }}</text> <!-- 显示商品名称 -->
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
	
    <tabBar :selectedIndex="currentTabIndex"></tabBar> 
    <view style="width: 100%;height: calc(100rpx + env(safe-area-inset-bottom)/0.75);"></view>
	
</template>

<script setup>
import { ref, onMounted,defineComponent  } from 'vue'
import tabBar from "../../../components/tabBar/tabBar.vue";
import {http} from '/until/request.js'
import { useRouter } from 'vue-router'; // 如果需要路由跳转功能
import {
		useTokenStore
	} from '../../../store/token'; //导入pinia对象

// 声明 searchQuery，用于存储搜索输入
const searchQuery = ref('');
const currentTabIndex = ref(0);


// 处理搜索事件
const handleSearch = async () => {
    console.log('Search Query:', searchQuery.value); // 打印搜索查询内容
    try {
        const response = await http({
            url: '/lft/stypes/sou',
            method: 'post',
            data: { goodsName: searchQuery.value } ,// 发送搜索查询内容到后端
		
        });
        shang.value = response.data; // 将返回的商品数据赋值给 shang
		for (let i = 0; i < response.data.length; i++) {
		    const iamge = response.data[i];
		    // console.log(iamge);
		
		    // 创建响应式引用
		    const xx = ref(null);
			// console.log(iamge.goodsPics)
			// console
			// .log(iamge.goodsPics.length)
		    try {
		        if (iamge.goodsPics.length >124) {
		            // 假设长度大于124时，goodsPics已经是Base64编码的URL
					
		            xx.value = iamge.goodsPics;
					// console.log(xx.value)
		        } else {
		            // 尝试解码Base64字符串
		            xx.value = atob(iamge.goodsPics);
		        }
		        shang.value[i].goodsPics = xx.value;
		    } catch (error) {
		        console.error(`Error decoding goodsPics for item ${i}:`, error);
		        // 处理解码错误，例如设置默认图片
		        shang.value[i].goodsPics = 'default-image-url';
		    }
		}
        console.log(shang.value); // 打印返回的商品数据
    } catch (error) {
        console.error('搜索失败', error); // 打印错误信息
    }
	
};

// 激活索引，用于高亮显示当前选中的分类
const activeIndex = ref(null);

// 通过 id 查询分类
const tolift = async (item, id) => {
    const response = await http({
        url: `/lft/stypes/selectByType/${id}`,
        method: 'get' // 根据实际情况调整请求方法
    });
    activeIndex.value = id; // 设置激活的分类 id
    shang.value = response.data; // 将返回的商品数据赋值给 shang
    console.log(shang.value); // 打印返回的商品数据
	for (let i = 0; i < response.data.length; i++) {
	    const iamge = response.data[i];
	    // console.log(iamge);
	
	    // 创建响应式引用
	    const xx = ref(null);
		// console.log(iamge.goodsPics)
		// console
		// .log(iamge.goodsPics.length)
	    try {
	        if (iamge.goodsPics.length >124) {
	            // 假设长度大于124时，goodsPics已经是Base64编码的URL
				
	            xx.value = iamge.goodsPics;
				// console.log(xx.value)
	        } else {
	            // 尝试解码Base64字符串
	            xx.value = atob(iamge.goodsPics);
				// console.log(55555)
				// console.log(xx.value)
	        }
	        shang.value[i].goodsPics = xx.value;
			// console.log(8888888888887)
			// console.log(shang.value[i].goodsPics)
	    } catch (error) {
	        console.error(`Error decoding goodsPics for item ${i}:`, error);
	        // 处理解码错误，例如设置默认图片
	        shang.value[i].goodsPics = 'default-image-url';
	    }
	}
};

// 通过名字查询商品详情
const tiao = (goodsName) => {
    uni.navigateTo({
        url: `/pages/businessman/xiang/xiang?goodsName=${goodsName}`, // 跳转到商品详情页面
    });
};

// 查询商品的分类
const haha = ref([]);
const haha1 = async () => {
    const response = await http({
        url: '/lft/stypes/selectAll',
        method: 'get' // 根据实际情况调整请求方法
    });
    haha.value = response.data; // 将返回的分类数据赋值给 haha
};

// 商品详情数据模型
const shang = ref([]);

const shang1 = async (tname) => {
    const response = await http({
        url: `/lft/stypes/selectByName/${tname}`,
        method: 'get' // 根据实际情况调整请求方法
    });

    shang.value = response.data; // 将返回的商品数据赋值给 shang

};

// 组件挂载时执行的初始化操作
onMounted(() => {
	
	const aa = useTokenStore().token
	console.log("存入的用户信息")
	console.log(aa)
    haha1(); // 查询商品分类
	shopsall();
});	

const shopsall = async () => {
    const response = await http({
        url: `/lft/stypes/suoyou`,
        method: 'get' // 根据实际情况调整请求方法
    });
    console.log("后端商品===");
    console.log(response);
    shang.value = response.data;
    // console.log(11111);
    // console.log(shang.value);

    for (let i = 0; i < response.data.length; i++) {
        const iamge = response.data[i];
        // console.log(iamge);

        // 创建响应式引用
        const xx = ref(null);
		// console.log(iamge.goodsPics)
		// console
		// .log(iamge.goodsPics.length)
        try {
            if (iamge.goodsPics.length >124) {
                // 假设长度大于124时，goodsPics已经是Base64编码的URL
				
                xx.value = iamge.goodsPics;
				// console.log(xx.value)
            } else {
                // 尝试解码Base64字符串
                xx.value = atob(iamge.goodsPics);
				// console.log(55555)
				// console.log(xx.value)
            }
            shang.value[i].goodsPics = xx.value;
			// console.log(8888888888887)
			// console.log(shang.value[i].goodsPics)
        } catch (error) {
            console.error(`Error decoding goodsPics for item ${i}:`, error);
            // 处理解码错误，例如设置默认图片
            shang.value[i].goodsPics = 'default-image-url';
        }
    }
};
</script>

<style lang="scss" scoped>
/* 商品图片样式 */
.img {
    border-radius: 10px 10px 10px 10px;
}

/* 搜索栏样式 */
.sou {
    background-color: #0f8fff;
    border-bottom: 1px solid #808080;
}

/* 列表容器样式 */
.list {
    display: flex;
    height: 100vh; /* 容器高度设置为视口高度 */
}

/* 左侧分类列表样式 */
.left {
    height: 100vh; /* 滚动视图高度设置为容器高度 */
    width: 250rpx;
}

/* 右侧商品列表样式 */
.you {
    flex: 1;
    padding-left: 30rpx;
}

.right {
    width: 500rpx;
    height: 100vh; /* 滚动视图高度设置为容器高度 */
    flex: 1;
    padding-left: 30rpx;
}

/* 分类项样式 */
.left1 {
    border-bottom: 2px solid white;
    font-size: 28rpx;
    color: #666666;
    background-color: #FFFFFF;
}

/* 高亮显示的分类项样式 */
.left-name {
    border-left: 8rpx solid #0F62FE;
    background-color: white;
    color: #0F62FE;
}

/* 分类名称样式 */
.left2 {
    padding: 25rpx 6rpx;
    text-align: center;
}

/* 商品列表容器样式 */
.right-xun {
    display: flex;
    flex-wrap: wrap;
}

/* 商品名称样式 */
.right-name {
    padding: 16rpx 0rpx;
    font-size: 25rpx;
}

/* 商品项样式 */
.right-item {
    margin-top: 20rpx;
    box-shadow: 5px 5px 10px #aaaaaa;
    width: 200rpx;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25rpx;
    border-radius: 10px 10px 10px 10px;
}
</style>
